<template>
	<div class="margin_top widthText word_wrap radius ffffff boxShadow paddingtb15 pointer" style="padding-top: 0;" @click="goInfo(child.id)">
		<img class="imgBox" :src="child.image_text" alt="">
		<div class="paddinglr">
			<div class="text_f color_three margin_top1 yihang">{{child.name}}</div>
			<div class="flexleft margin_top1">
				<div class="vipBox margin_right1" v-if="child.is_vip==1">VIP</div>
				<div class="num">编号：{{child.id}}</div>
			</div>
			<div class="flexbetween margin_top1">
				<div class="flexleft" v-if="child.teacher">
					<img class="userImg margin_right1" :src="child.teacher.avatar" alt="">
					<div class="text_b color_three">{{child.teacher.username}}</div>
				</div>
				<div class="flexleft" v-else>
					<img class="userImg margin_right1" :src="child.myteacher.avatar" alt="">
					<div class="text_b color_three">{{child.myteacher.username}}</div>
				</div>
				<div>
					<span class="text_b color_red">￥</span>
					<span class="text_ht color_red">{{child.price}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			child:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			goInfo(id){ //优课详情
				this.$router.push({
					path:"/fineCourse/courseInfo",
					query:{
						id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 267px;
		height: 153px;
		border-radius: 7px 7px 0px 0px;
	}

	.widthText {
		width: 267px;
	}

	.paddinglr {
		padding: 0 10px;
	}

	.vipBox {
		padding: 5px 10px;
		background: rgba(255, 0, 0, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF0000;
	}

	.num {
		padding: 5px 10px;
		background: rgba(153, 153, 153, .1);
		border-radius: 6px 6px 6px 6px;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.userImg{
		width: 22px;
		height: 22px;
		border-radius: 50%;
	}
</style>